<template>
  <teleport to="body">
    <div class="mask" v-if="comCpt">
      <div class="maskContainer">
        <div class="maskContent" :style="{ width, height }">
          <div class="content">
            <div class="header">
              <div class="headerLeft">
                {{ title }}
              </div>
              <div class="headerRight" @click="closeIt">
                <close-outlined />
              </div>
            </div>
            <div class="containerBody">
              <div class="containBox">
                <slot name="body"></slot>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </teleport>
</template>
<script setup>
import { CloseOutlined } from "@ant-design/icons-vue"
import { toRef, toRefs } from "vue"
const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  width: {
    type: String,
    default: "60%"
  },
  height: {
    type: String,
    default: "60%"
  },
  comCpt: {
    type: Boolean,
    default: false
  }
})
let comCpt = toRef(props, "comCpt")
let title = toRef(props, "title")
let width = toRef(props, "width")
let height = toRef(props, "height")
const emit = defineEmits(["update:comCpt"])

const closeIt = () => {
  emit("update:comCpt", false)
}
</script>
<style lang="less" scoped>
:deep(.headerRight .anticon svg) {
  font-size: 20px;
  cursor: pointer;
  color: #32a2e9;
}
:deep(.ant-btn) {
  background: rgb(5, 25, 39);
  border-color: rgb(72, 131, 158);
  color: #fff;
}
.mask {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;

  .maskContainer {
    width: 100%;
    height: 100%;
    position: relative;
    .maskContent {
      // height: 60%;
      //   width: 60%;
      background: url(../../../assets/siteSafety/dialogbg.jpg);
      background-size: 100% 100%;
      position: absolute;
      top: 0vh;
      left: 50%;
      transform: translateX(-50%);
      .content {
        height: 100%;
        width: 100%;
        // background: green;
        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 52px;
          line-height: 52px;
          padding: 0 20px;
          background: #041e47;
          .headerLeft {
            color: yellow;
            font-size: 24px;
          }
          .headerRight {
            display: flex;
            align-items: center;
          }
        }
        .containerBody {
          height: calc(~"100% - 52px");
          padding: 8px;
          background: rgba(8, 42, 63, 0.8);
          .containBox {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
            :deep(.ant-spin-nested-loading) {
              height: 100%;
              width: 100%;
            }
            :deep(.ant-spin-nested-loading > div > .ant-spin) {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }
    }
  }
}
</style>
